<template>
  <li class="pl-4 pr-3 py-2 rounded-lg mb-0.5 last:mb-0 bg-linear-to-r"
    :class="activeCondition && 'from-violet-500/[0.12] dark:from-violet-500/[0.24] to-violet-500/[0.04]'">
    <slot :handleClick="handleClick" :expanded="expanded" />
  </li>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue';

// 定义 props 接口
const props = defineProps<{
  activeCondition: boolean;
}>();

// 创建一个响应式变量用于管理展开状态
const expanded = ref<boolean>(props.activeCondition);

// 定义处理点击的函数
const handleClick = () => {
  expanded.value = !expanded.value;
};
</script>

<style>
/* 可根据需要添加样式 */
</style>
